<template>
  <div class="commonForm">
    <el-row :gutter="15">
      <el-col :xs="24" :lg="12">
        <card-box
          title="button-默认大小-mini"
          color="card-icon-blue"
          icon="icon-template_template"
          maxHeight="450px"
          minHeight="200px"
        >
          <div slot="card-content" class="demo-button">
            <el-row>
              <el-button @click="openTab()">默认按钮</el-button>
              <el-button type="primary">主要按钮</el-button>
              <el-button type="success">成功按钮</el-button>
              <el-button type="info">信息按钮</el-button>
              <el-button type="warning">警告按钮</el-button>
              <el-button type="danger">危险按钮</el-button>
            </el-row>

            <el-row>
              <el-button plain>朴素按钮</el-button>
              <el-button type="primary" plain>主要按钮</el-button>
              <el-button type="success" plain>成功按钮</el-button>
              <el-button type="info" plain>信息按钮</el-button>
              <el-button type="warning" plain>警告按钮</el-button>
              <el-button type="danger" plain>危险按钮</el-button>
            </el-row>

            <el-row>
              <el-button round>圆角按钮</el-button>
              <el-button type="primary" round>主要按钮</el-button>
              <el-button type="success" round>成功按钮</el-button>
              <el-button type="info" round>信息按钮</el-button>
              <el-button type="warning" round>警告按钮</el-button>
              <el-button type="danger" round>危险按钮</el-button>
            </el-row>

            <el-row>
              <el-button icon="el-icon-search" circle></el-button>
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
              <el-button type="success" icon="el-icon-check" circle></el-button>
              <el-button type="info" icon="el-icon-message" circle></el-button>
              <el-button type="warning" icon="el-icon-star-off" circle></el-button>
              <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </el-row>
          </div>
        </card-box>
      </el-col>
      <el-col :xs="24" :lg="12">
        <card-box
          title="card-icon-color,用来查找icon和颜色"
          color="card-icon-yellow"
          icon="icon-template_template"
          maxHeight="450px"
          minHeight="200px"
        >
          <div slot="card-content" class="demo-card-icon">
            <div class="card-demo-icon" :class="'card-icon-blue'">
              <i :class="'iconfont '+'icon-template_template'"></i>
            </div>
            <div class="card-demo-icon" :class="'card-icon-yellow'">
              <i :class="'iconfont '+'icon-template_template'"></i>
            </div>
            <div class="card-demo-icon" :class="'card-icon-red'">
              <i :class="'iconfont '+'icon-template_template'"></i>
            </div>
            <div class="card-demo-icon" :class="'card-icon-green'">
              <i :class="'iconfont '+'icon-template_template'"></i>
            </div>
          </div>
        </card-box>
      </el-col>

      <el-col :xs="24" :lg="24">
        <card-box
          title="卡片展示"
          color="card-icon-red"
          icon="icon-template_template"
          maxHeight="450px"
          minHeight="100px"
        >
          <div slot="card-content">
            <el-row :gutter="12">
              <el-col :xs="12" :sm="8" :lg="4">
                <div class="card-stats">
                  <div class="card-icon card-icon-yellow">
                    <i :class="'iconfont '+'icon-template_template'"></i>
                  </div>
                  <div>
                    <p class="card-category">card-category</p>
                    <h3 class="card-title">title</h3>
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="8" :lg="4">
                <div class="card-stats">
                  <div class="card-icon card-icon-red">
                    <i :class="'iconfont '+'icon-template_template'"></i>
                  </div>
                  <div>
                    <p class="card-category">card-category</p>
                    <h3 class="card-title">title</h3>
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="8" :lg="4">
                <div class="card-stats">
                  <div class="card-icon card-icon-green">
                    <i :class="'iconfont '+'icon-template_template'"></i>
                  </div>
                  <div>
                    <p class="card-category">card-category</p>
                    <h3 class="card-title">title</h3>
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="8" :lg="4">
                <div class="card-stats">
                  <div class="card-icon card-icon-blue">
                    <i :class="'iconfont '+'icon-template_template'"></i>
                  </div>
                  <div>
                    <p class="card-category">card-category</p>
                    <h3 class="card-title">title</h3>
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="8" :lg="4">
                <div class="card-stats">
                  <div class="card-icon card-icon-yellow">
                    <i :class="'iconfont '+'icon-template_template'"></i>
                  </div>
                  <div>
                    <p class="card-category">card-category</p>
                    <h3 class="card-title">title</h3>
                  </div>
                </div>
              </el-col>
              <el-col :xs="12" :sm="8" :lg="4">
                <div class="card-stats">
                  <div class="card-icon card-icon-red">
                    <i :class="'iconfont '+'icon-template_template'"></i>
                  </div>
                  <div>
                    <p class="card-category">card-category</p>
                    <h3 class="card-title">title</h3>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </card-box>
      </el-col>
      <el-col :xs="24" :lg="8">
        <card-box
          title="轮播图"
          color="card-icon-red"
          icon="icon-template_template"
          maxHeight="450px"
          minHeight="200px"
        >
          <div slot="card-content">
            <el-carousel trigger="click" height="190px">
              <el-carousel-item
                v-for="item in 4"
                :key="item"
                style="background:#eee;textAlign:center;lineHeight=190px;"
              >
                自定义内容
                <h3 class="card-title">{{item}}</h3>
              </el-carousel-item>
            </el-carousel>
          </div>
        </card-box>
      </el-col>
      <el-col :xs="24" :lg="16">
        <card-box
          title="穿梭框"
          color="card-icon-green"
          icon="icon-template_template"
          maxHeight="450px"
          minHeight="200px"
        >
          <div slot="card-content">
            <el-transfer v-model="TransferValue" :data="TransferData"></el-transfer>
          </div>
        </card-box>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import CardBox from "@/components/CardBox"
export default {
  name: "commonStyle",
  components: { CardBox },
  data () {
    const generateData = _ => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0
        });
      }
      return data;
    };
    return {
      TransferData: generateData(),
      TransferValue: [1, 4]
    }
  },
  methods: {
    openTab(){
      this.$CommonFn.Page.OpenNewTab('/demo/screeningForm')
      //this.$CommonFn.Page.OpenNewPage('/demo/screeningForm')
    }
  }
}
</script>
<style lang="scss" scoped>
.demo-button .el-row {
  margin-bottom: 20px;
}
.demo-card-icon {
  display: flex;
  justify-content: space-around;
}

//card-demo-icon
.card-demo-icon {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 5px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14),
    0 7px 10px -5px rgba(0, 188, 212, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  i {
    color: #fff;
    font-size: 21px;
  }
}
//card-stats
.card-stats:hover {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
}
.card-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 5px;
  cursor: pointer;
  text-align: right;
  border-radius: 5px;
  padding: 10px 15px 8px 15px;
  border: 1px solid #eee;
  .card-icon {
    display: block;
    width: 50px;
    height: 50px;
    // background: linear-gradient(60deg, #26c6da, #00acc1);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      color: #fff;
      font-size: 21px;
    }
  }
  .card-category {
    color: #777;
    font-size: 14px;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card-title {
    font-size: 20px;
    color: #333;
  }
}
</style>
